<script setup lang="ts">

import {ref,computed} from 'vue'
import {uploadImage} from '../api/tools'
import { storeCreate} from "../api/store.ts";
import {UploadFilled} from "@element-plus/icons-vue"

const address = ref('')
const imageFileList = ref([])
const logoUrl = ref('')
const storeName = ref('')
const createDisabled = computed(() => storeName.value == '' || logoUrl.value == '' || address.value == '')
function handleChange(file: any, fileList: any) {


  imageFileList.value = fileList
  let formData = new FormData()
  formData.append('file', file.raw)
  uploadImage(formData).then(res => {
    logoUrl.value = res.data.result
    console.log(logoUrl.value)
  })
}

function handleExceed() {
  ElMessage.warning(`当前限制选择 1 个文件`);
}

function uploadHttpRequest() {
  return new XMLHttpRequest()
}

function newStore(){
  storeCreate({
        name : storeName.value,
        logoURL : logoUrl.value,
        address : address.value


      }
  ).then(res => {
        if (res.data.code === '000') {
          ElMessage({
            message: "创建商店成功",
            type: 'success',
            center: true,
          })
        }
        else {
          ElMessage({
            message:res.data.msg,
            type: 'error',
            center: true,
          })

        }
    storeName.value = ''
    address.value = ''
    imageFileList.value = []
      }
  )

}
</script>


<template>
  <el-main>

    <el-form>

      <el-form-item label="商店Logo">
        <el-upload
            v-model:file-list="imageFileList"
            :limit="1"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :on-remove="handleChange"
            class="upload-demo"
            list-type="picture"
            :http-request="uploadHttpRequest"
            drag>
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处或单击此处上传。仅允许上传一份文件。
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <span>商店名</span>
        <el-input class = storeName v-model = "storeName"></el-input>
      </el-form-item>

      <el-form-item>
        <span>商店地址</span>
        <el-input class = storeAddress v-model = "address" label="商店地址"></el-input>
      </el-form-item>

      <el-button :disabled = createDisabled @click.prevent = "newStore" class = "createbutton">创建</el-button>

    </el-form>

  </el-main>
</template>


<style scoped>
.storeName{
  margin-top: 20px;
}

.storeAddress{
  margin-top: 20px;
}
.createbutton{
  width: 100%;
  margin-top: 20px;
}
</style>